import { Table, Button, Tooltip } from 'antd'
import { FormOutlined, DeleteOutlined } from '@ant-design/icons'
import { useEffect, useState } from 'react'
// 引入接口地址
import { menuDelete } from '../../request/api'

function App (props) {
  const columns = [
    {
      title: '菜单编号',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '菜单名称',
      dataIndex: 'title',
      key: 'title'
    },
    {
      title: '上级菜单',
      dataIndex: 'pid',
      key: 'pid'
    },
    {
      title: '菜单图标',
      dataIndex: 'icon',
      key: 'icon'
    },
    {
      title: '菜单地址',
      dataIndex: 'url',
      key: 'url'
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: record => {
        return <div>{record.status == 1 ? '正常' : '禁用'}</div>
      }
    },
    {
      title: '操作',
      dataIndex: '',
      key: 'x',
      render: record => {
        return (
          <div>
            <Tooltip title='编辑' className='edit'>
              <Button
                type='primary'
                shape='circle'
                icon={<FormOutlined />}
                onClick={() => edit(record.id)}
              />
            </Tooltip>
            <Tooltip title='删除'>
              <Button
                type='danger'
                shape='circle'
                icon={<DeleteOutlined />}
                onClick={() => del(record.id)}
              />
            </Tooltip>
          </div>
        )
      }
    }
  ]
  //封装一个编辑事件
  const edit = id => {
    console.log('修改', id)
    props.edit(id)
  }
  //封装一个删除事件
  const del = id => {
    console.log('删除', id)
    // 调用删除接口
    menuDelete({ id }).then(res => {
      console.log(res)
      // 重新渲染
      props.getList()
    })
  }
  useEffect(() => {
    // 调用列表接口
    props.getList()
  }, [])
  return (
    <div>
      <Table
        columns={columns}
        dataSource={props.menuData}
        bordered={true}
        defaultExpandAllRows={true}
        pagination={false}
      />
    </div>
  )
}
export default App
